<template>
  <div class="apps">
    <n-card :bordered="false" class="proCard">
      <n-space>
        <div class="search-input">
          <n-input-group>
            <n-input
              :style="{ width: '100%' }"
              placeholder="输入名称查询"
              v-model:value="searchData.name"
            />
            <n-button type="primary" @click="searchApp">搜索</n-button>
          </n-input-group>
        </div>
        <div>
          <n-button type="info" @click="showModalClick">上传</n-button>
          <Upload v-model:showModal="showModal" />
        </div>
      </n-space>
    </n-card>
    <n-grid class="mt-6" x-gap="12" :cols="5">
      <n-gi class="mt-2" v-for="(item, index) in apps" :key="index">
        <div>
          <n-card
            size="large"
            class="cursor-pointer app-card"
            header-style="display: flex; text-align: center;"
            title=""
            hoverable
            @click="appEdit(item.shortCode)"
          >
            <template #header>
              <n-avatar round :size="60" :src="item.icon" />
              <div>
                <n-gradient-text
                  :gradient="{
                    deg: 180,
                    from: 'rgb(85, 85, 85)',
                    to: 'rgb(170, 170, 170)',
                  }"
                  >{{ item.name }}</n-gradient-text
                >
              </div>
            </template>
            <template #default>
              <div class="app-apk-icon" hoverable>
                <img class="app-apk-icon" src="@/assets/images/app_apk.png" />
              </div>
              <div>
                <n-ellipsis style="max-width: 240px">短链接: {{ item.installPath }}</n-ellipsis>
              </div>
              <div>
                <n-ellipsis style="max-width: 240px">包名: {{ item.bundleId }}</n-ellipsis>
              </div>
              <div>
                <n-ellipsis style="max-width: 240px">当前版本: {{ item.version }}</n-ellipsis>
              </div>
            </template>
            <template #action>
              <n-space>
                <n-button round @click="appEdit(item.shortCode)">
                  <template #icon>
                    <n-icon size="18">
                      <FormOutlined />
                    </n-icon>
                  </template>
                  编辑
                </n-button>
                <n-button round @click="clickDownload(item.shortCode)">
                  <template #icon>
                    <n-icon size="18">
                      <EyeOutlined />
                    </n-icon>
                  </template>
                  预览
                </n-button>
              </n-space>
            </template>
          </n-card>
        </div>
      </n-gi>
    </n-grid>
  </div>
</template>
<script lang="ts" setup>
  import { FormOutlined, EyeOutlined } from '@vicons/antd';
  import Upload from './components/FileModal.vue';
  import { getApps } from '@/api/apps/app';
  import { useRoute, useRouter } from 'vue-router';
  import { ref, onMounted } from 'vue';
  const route = useRoute();
  const router = useRouter();
  const apps = ref([]);
  const searchData = ref({
    name: '',
  });
  const showModal = ref<boolean>(false);
  const showModalClick = () => {
    showModal.value = true;
  };
  const clickDownload = (code) => {
    const { href } = router.resolve({
      path: '/preview',
      query: { code: code },
    });
    window.open(href, '_blank');
  };
  const appEdit = (code) => {
    router.push({
      path: '/list/edit',
      query: { code: code },
    });
  };
  const searchApp = () => {
    getApps(searchData.value)
      .then((res) => {
        if (res.code) {
          apps.value = res.data;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  onMounted(async () => {
    const result = await getApps(searchData.value);
    apps.value = result.data;
  });
</script>

<style lang="less" scoped>
  .app-apk-icon {
    display: flex;
    width: 60px;
    height: 48px;
    position: absolute;
    left: -2px;
    top: 18px;
    background-size: 52px 38px;
  }
</style>
